import {
  StyleSheet,
  Text,
  TextInput,
  View,
  Dimensions,
  TouchableHighlight,
  ScrollView,
  Image,
  TouchableOpacity,
} from "react-native";
import React, { useEffect, useState } from "react";
import Ionicons from "@expo/vector-icons/Ionicons";
import { Tabs } from "@ant-design/react-native";
import axiosApi from "../Api/axios";
import { router } from "expo-router";

export default function Excellentclass() {
  const tabs = [
    { title: "外科肿瘤学" },
    { title: "内科肿瘤学" },
    { title: "临床试验" },
    { title: "护理专区" },
  ];
  const [data1, setData1] = useState([]); // 轮播图数据
  const [text, onChangeText] = useState("");
  const [state, setState] = useState(false); //控制搜索框的显示
  const [activeKey, setActiveKey] = useState("home"); // 当前选中的标签
  const style = {
    alignItems: 'center',
    justifyContent: 'center',
    height: 150,
    backgroundColor: '#fff',
  }
  // 获取轮播图数据
  const fetchCarouselImages = async () => {
    try {
      const response = await axiosApi.get("/fps/course");
      setData1(response.data.course);
    } catch (error) {
      console.error("错误原因", error);
    }
  };

  useEffect(() => {
    fetchCarouselImages();

  }, []);


  return (
    <View style={styles.container}>
      {/* 搜索 */}
      {state ? (
        <>
          <View style={styles.searchbox}>
            <View style={styles.searchinput}>
              <Ionicons name="search-outline" size={18} color={"#ccc"} />
              <TextInput
                style={styles.input}
                onChangeText={onChangeText}
                value={text}
                placeholder="搜索"
              />
            </View>
          </View>
        </>
      ) : (
        <>
          <View style={styles.searchbox}>
            <TouchableHighlight
              onPress={() => {
                setState(true);
              }}
            >
              <View style={styles.search}>
                <Ionicons name="search-outline" size={24} color={"#ccc"} />
                <Text style={{ marginLeft: 10, color: "#ccc" }}>搜索</Text>
              </View>
            </TouchableHighlight>
          </View>
        </>
      )}
      {/* 病例分享 */}
      <Tabs tabs={tabs}>
        <View style={styles.style1}>
          <ScrollView>
            {
              data1.map((item) => (
                <View style={styles.q1}>
                  <TouchableOpacity
                    onPress={() => {
                      router.push({
                        pathname: "/YgFile/ExcellentclassShow",
                        params: {
                          name: item.coursetitle,
                          num: item.num,
                        }
                      })
                    }}
                >
                    <View style={{ padding: 10 }}>
                    <Image
                      style={{ width: 100, height: 100 }}
                      source={{ uri: item.courseimg }}></Image>
                  </View>
                  </TouchableOpacity>
                  <View style={{ padding: 10 }}>
                    <Text style={{ fontSize: 12, fontWeight: 700 }}>{item.coursetitle}</Text>
                    <Text style={{ fontSize: 12, marginTop: 60}}>主讲：{item.coursename}<Text>                            2023-10-05</Text></Text>
                  </View>
                </View>
              ))
            }
          </ScrollView>
        </View>
        <View style={styles.style1}>
          <ScrollView>
            {
              data1.map((item) => (
                <View style={styles.q1}>
                  <View style={{ padding: 10 }}>
                    <Image
                      style={{ width: 100, height: 100 }}
                      source={{ uri: item.courseimg }}></Image>
                  </View>
                  <View style={{ padding: 10 }}>
                    <Text style={{ fontSize: 12, fontWeight: 700 }}>{item.coursetitle}</Text>
                    <Text style={{ fontSize: 12, marginTop: 60 }}>主讲：{item.coursename}<Text>                            2023-10-05</Text></Text>
                  </View>
                </View>
              ))
            }
          </ScrollView>
        </View>
        <View style={styles.style1}>
          <ScrollView>
            {
              data1.map((item) => (
                <View style={styles.q1}>
                  <View style={{ padding: 10 }}>
                    <Image
                      style={{ width: 100, height: 100 }}
                      source={{ uri: item.courseimg }}></Image>
                  </View>
                  <View style={{ padding: 10 }}>
                    <Text style={{ fontSize: 12, fontWeight: 700 }}>{item.coursetitle}</Text>
                    <Text style={{ fontSize: 12, marginTop: 60 }}>主讲：{item.coursename}<Text>                            2023-10-05</Text></Text>
                  </View>
                </View>
              ))
            }
          </ScrollView>
        </View>
        <View style={styles.style1}>
          <ScrollView>
            {
              data1.map((item) => (
                <View style={styles.q1}>
                  <View style={{ padding: 10 }}>
                    <Image
                      style={{ width: 100, height: 100 }}
                      source={{ uri: item.courseimg }}></Image>
                  </View>
                  <View style={{ padding: 10 }}>
                    <Text style={{ fontSize: 12, fontWeight: 700 }}>{item.coursetitle}</Text>
                    <Text style={{ fontSize: 12, marginTop: 60 }}>主讲：{item.coursename}<Text>                            2023-10-05</Text></Text>
                  </View>
                </View>
              ))
            }
          </ScrollView>
        </View>
      </Tabs>
    </View>
  );
}

const styles = StyleSheet.create({
  style1: {
    alignItems: "left",
    justifyContent: "center",
  },
  q1: {
    width: Dimensions.get("window").width,
    height: 120,
    backgroundColor: "white",
    marginBottom: 10,
    flexDirection: "row",
  },
  container: {
    flex: 1,
  },
  searchbox: {
    width: Dimensions.get("window").width,
    height: 70,
    alignItems: "center",
    justifyContent: "center",
  },
  search: {
    width: Dimensions.get("window").width - 100,
    height: 40,
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#FFF",
    borderRadius: 20,
  },
  searchinput: {
    width: Dimensions.get("window").width - 100,
    height: 40,
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#FFF",
    borderRadius: 20,
  },
  input: {
    height: 40,
    width: "90%",
  },
  Tabbar: {
    width: Dimensions.get("window").width,
    height: 100,
  },
});
